<template>
    <div class="outer">
      <a-menu mode="inline" theme="dark" @click="handleMenuClick" v-model:selectedKeys="current" :items="items" style="width: 250px; font-size: large; font-weight: bolder;" />
      <div v-if="current[0] != 'new' && detail == false">
        <br/>
        <div class="search">
          <a-input
            v-model:value="searchData.search"
            placeholder="搜索名字或者描述"
            style="width: 200px; color: gray; margin-left: 100px;"
            size="large"
            load
          />
          <div style="color: grey; font-size: large; margin-left: 100px; margin-top: 10px;">上传日期：</div>
          <a-range-picker v-model:value="dateRange" show-time style="margin-left: 20px;" />
          <div style="color: grey; font-size: large; margin-left: 100px; margin-top: 10px;">标签：</div>
          <a-select
            v-model:value="searchData.labelIds"
            mode="multiple"
            placeholder="选择标签"
            :options="labelsAll"
            @change="handleLabelChange"
            style="width: 300px; margin-left: 20px;"
          >
          </a-select>
          <a-button size="large" style="margin-left: 100px;" @click="search">搜索</a-button>
        </div>
        <br />
        <br />
        <a-list :grid="{ gutter: 16, column: 5 }" :data-source="data">
            <template #renderItem="{ item }">
                <a-list-item @click="handleCardClick(item)">
                  <a-card style="width: 250px; height: 450px;">
                    <template #extra>上传时间：{{item.gmtCreated}}</template>
                    <template #cover>
                      <img alt="example" :src="item.pic" style="height: 300px;" />
                    </template>
                    <a-card-meta :title="item.title">
                      <template #description>{{item.description}}</template>
                    </a-card-meta>
                  </a-card>
                </a-list-item>
            </template>
        </a-list>
        <a-pagination v-model:current="page" v-model:pageSize="pageSize" :total="total" @change="onPageChange" />
      </div>
      <div v-else-if="current[0] != 'created' && detail == true">
        <a-page-header
          style="border: 1px solid rgb(235, 237, 240)"
          title="修改剧本"
          @back="handleTurnBack"
        />
        <ScriptsDetail :id="itemId" :collection="searchData.collection"/>
      </div>
      <div v-else-if="current[0] == 'created' && detail == true">
        <NewScript :id="itemId" />
      </div>
      <div v-else-if="current[0] == 'new'">
        <NewScript :id="0" />
      </div>
    </div>
</template>

<script lang="ts">
import NewScript from './newScript.vue'
import ScriptsDetail from './scriptsDetail.vue';

export default {
    name: "Scripts",
    components: {
      NewScript,
      ScriptsDetail
    }
}
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import type { Dayjs } from 'dayjs';
import { MenuProps } from 'ant-design-vue';
import { getLabelList } from '@/api/label_api';
import { searchScripts } from '@/api/scripts_api'
import router from '@/router/index';
import { getItem } from '@/api/file_cache';

type RangeValue = [Dayjs, Dayjs];
const dateRange = ref<RangeValue>();
interface DataItem {
  pic: string;
  title: string;
  description: string;
  gmtCreated: string;
  id: number;
};
const data = ref<DataItem[]>([]);
const current = ref<string[]>(['all']);
const items = ref<MenuProps['items']>([
{
  key: 'all',
  label: '全部剧本',
  title: '全部剧本',
},
{
  key: 'collection',
  label: '我的收藏',
  title: '我的收藏',
},
{
  key: 'created',
  label: '我创建的',
  title: '我创建的',
},
{
  key: 'new',
  label: '新建剧本',
  title: '新建剧本'
},
{
  key: 'back',
  label: '返回首页',
  title: '返回首页'
}
])
const labelsAll = ref<{label: string, value: number, disabled: boolean}[]>([])
interface SearchData {
  search: string,
  labelIds: number[],
  creator: boolean,
  collection: boolean,
  beginTime: any,
  EndTime: any
}
const searchData = reactive<SearchData>({
  search: '',
  labelIds: [],
  creator: false,
  collection: false,
  beginTime: null,
  EndTime: null
})
const page = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)
const detail = ref<boolean>(false)
const itemId = ref<number>(0)

const handleMenuClick: MenuProps['onClick'] = async menuInfo => {
  searchData.search = ''
  searchData.labelIds = []
  searchData.beginTime = null
  searchData.EndTime = null
  detail.value = false
  if (menuInfo.key === 'back') {
    router.push( {name: 'main'} )
  } else if (menuInfo.key === 'created') {
    searchData.collection = false
    searchData.creator = true
  } else if (menuInfo.key === 'collection') {
    searchData.creator = false
    searchData.collection = true
  } else {
    searchData.creator = false
    searchData.collection = false
  }
  await search()
};

const handleCardClick = (item:any) => {
  detail.value = true
  itemId.value = item.id
}

const handleTurnBack = () => {
  detail.value = false
}

onMounted(async () => {
  // 请求label下拉框数据
  await getLabelList(0)
  .then(response => {
    for (let index = 0; index < response.data.length; index++) {
      labelsAll.value.push(response.data[index])
    }
    console.log(response.data)
  })
  .catch(error => {})

  await search()
});

const onPageChange = async (pageNumber: number) => {
  await search()
}

const handleLabelChange = (value: string[]) => {
};

const search = async () => {
  console.log(dateRange.value)
  if (dateRange.value != undefined && dateRange.value.length == 2) {
    searchData.beginTime = dateRange.value?.[0].format('YYYY-MM-DD HH:mm:ss')
    searchData.EndTime = dateRange.value?.[1].format('YYYY-MM-DD HH:mm:ss')
  }
  console.log(searchData)
  await searchScripts(searchData, page.value, pageSize.value)
  .then(async response => {
    total.value = response.data.total
    data.value = []
    for (let index = 0; index < response.data.list.length; index++) {
      // let coverUrl = String(response.data.list[index].coverUrl);
      // let coverData: Blob | undefined = undefined;
      // await getItem(coverUrl)
      //   .then(resp => {
      //     coverData = resp;
      //   })
      //   .catch(err => {
      //     console.error(err);
      //   })
      data.value.push({
        pic: response.data.list[index].coverUrl,
        title: response.data.list[index].name,
        description: response.data.list[index].description,
        gmtCreated: response.data.list[index].gmtCreated,
        id: response.data.list[index].id
      })
    }
    searchData.search = ""
    searchData.labelIds = []
    searchData.beginTime = null
    searchData.EndTime = null
    dateRange.value = undefined
  })
  .catch(error =>{})
};
</script>

<style scoped>
.outer {
  display: flex;
  height: 900px;
}
.search {
  display: flex;
}
</style>

